<template>
    <div class="main">
        <div class="title">
            <span>个人资料</span>
            <el-button type="text" @click="handleEdit">{{isEdit?'编辑':'取消'}}</el-button>
        </div>
        <div class="form_warp">
            <el-form ref="form" label-width="90px">
                <el-form-item label="账号：" style="text-align: left;"
                v-if="userInfo.login_code">
                    <el-input v-model="userInfo.login_code" disabled style="width: 600px"></el-input>
                </el-form-item>
                <el-form-item label="账号：" style="text-align: left;"
                v-else>
                    <el-input v-model="userInfo.logincode" disabled style="width: 600px"></el-input>
                </el-form-item>
                <el-form-item label="姓名：" style="text-align: left;"
                v-if="userInfo.name">
                    <el-input v-model="userInfo.name" :disabled="isEdit" style="width: 600px"></el-input>
                </el-form-item>
                <el-form-item label="姓名：" style="text-align: left;"
                v-else>
                    <el-input v-model="userInfo.username" :disabled="isEdit" style="width: 600px"></el-input>
                </el-form-item>
                <el-form-item label="性别：" style="text-align: left;">
                    <!-- <el-input v-if="isEdit" v-model="form.sex"  style="width: 600px"></el-input> -->
                    <el-radio-group :disabled="isEdit" v-model="userInfo.sex">
                        <el-radio label="0">女</el-radio>
                        <el-radio label="1">男</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机：" style="text-align: left;"
                v-if="userInfo.phone">
                    <el-input v-model="userInfo.phone" placeholder="" disabled style="width: 600px"></el-input>
                    <!-- <el-button type="text" @click="goBinding">绑定</el-button> -->
                </el-form-item>
                <el-form-item label="手机：" style="text-align: left;"
                v-else>
                    <el-input v-model="userInfo.telephone" placeholder="" disabled style="width: 600px"></el-input>
                    <!-- <el-button type="text" @click="goBinding">绑定</el-button> -->
                </el-form-item>
                <el-form-item label="邮箱：" style="text-align: left;">
                    <el-input v-model="userInfo.email" placeholder="未绑定邮箱，立即绑定" disabled style="width: 600px"></el-input>
                    <el-button type="text" v-if="!userInfo.email" @click="goBinding">绑定</el-button>
                </el-form-item>
                <el-form-item label="个性签名：" style="text-align: left;">
                    <el-input maxlength="20" :show-word-limit="true" v-model="loadBindInfoP.signature" placeholder="您还没有个性签名"
                        :disabled="isEdit" style="width: 600px; "></el-input>
                </el-form-item>
                <el-form-item style="text-align: left;" v-if="!isEdit">
                    <el-button type="primary" @click="handleSave">保 存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        computed: {
            ...mapState({
                userInfo: state => state.userModule.userInfo
            })
        },
        created() {
            this.loadBindInfo()
            this.handleGetUserInfo()
        },
        data() {
            return {
                isEdit: true,
                loadBindInfoP: {}
            }
        },
        methods: {
            signature(){
                this.$store.dispatch('homeModule/signature',{
                    signature: this.loadBindInfoP.signature
                }).then(res => {
                    if(res){
                        // this.$message.success('')
                    }
                })
            },
            loadBindInfo(){
                this.$store.dispatch('homeModule/loadBindInfo').then(res => {
                    if(res){
                        this.loadBindInfoP = res
                    }
                })
            },
            handleEdit() {
                this.isEdit = !this.isEdit
            },
            // 保存用户信息
            handleSave() {
                const loading = this.$loading({
                    lock: true,
                    text: '保存中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });
                this.$store.dispatch('personalModule/saveUserInfo',{
                        id:this.userInfo.id,
                        username:this.userInfo.username,
                        sex:this.userInfo.sex,
                        logincode:this.userInfo.login_code,
                        signature:this.loadBindInfoP.signature,
                        
                }).then(res => {
                    this.signature()
                    if (res.data.code === 200) {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.isEdit = true;
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }
                    loading.close();
                }).catch(err => {
                    loading.close();
                    this.$message.error('服务器内部错误！保存失败！');
                })
            },

            // 去绑定
            goBinding() {
                this.$router.push({
                    path: '/personal/accountSecurity'
                })
            },// 获取用户信息
            handleGetUserInfo() {
                // const loading = this.$loading({
                //     lock: true,
                //     text: 'Loading',
                //     spinner: 'el-icon-loading',
                //     background: 'rgba(0, 0, 0, 0.2)'
                // });
                this.$store.dispatch("userModule/findByUserIdInfo")
                // this.$store.dispatch('personalModule/getUserInfo',{
                //     id: this.userInfo.id
                // }).then(res => {
                //     if (res.data.code === 200) {
                //         this.form = res.data.result[0]
                //     } else {
                //         this.$message({
                //             message: res.data.msg,
                //             type: 'warning'
                //         });
                //     }
                //     loading.close()
                // }).catch(err => {
                //     this.$message.error('服务器内部错误');
                //     loading.close()
                // })
            }
        },

    }
</script>

<style lang="scss" scoped>
    .main {
        width: 100%;
        height: 100%;

        .title {
            text-align: left;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #DCDFE6;
        }

        .form_warp {
            box-sizing: border-box;
            padding-top: 10px;
        }

        .limit {
            width: 600px;
            text-align: right;
            font-size: 14px;
            color: #606266;
        }
    }
</style>
